<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>行政区浏览</title>
    <!-- <script>
        window._AMapSecurityConfig = {
          serviceHost: 'http://fangxue.nihao/_AMapService',
        }
    </script> -->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'c5b3373591dcf4cc8c26437d2e1e0865',
        }
</script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=9459c43cfd26752214a04ca5de3c7db5"></script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        .mydiv{
            width:200px;
            height: 200px;
            border: 1px solid #ccc;
            background: red;
        }
    </style>
  </head>
  <body>
    <div id="outer-box">
      <div
        id="container"
        style="width: 800px; height: 500px"
        tabindex="0"
      ></div>
    
    <script type="text/javascript">
      var disCountry,map,mapData = [],getColorByDGP,colors={}
     $(function(){
         $.ajax({
            url:'https://liu.zzgoodqc.cn/gaode',
            type:'get',
            dataType:'json',
            success:function(res){
                let data =  res.data.data.province
                for(let i in  data){
                    mapData.push({
                        province:data[i].province,
                        max_net_time:data[i].max_net_time,
                        children:data[i].children
                    })
                }
                myfun()
            }
         })
     })
       getColorByDGP = function (name) {
       let index =  mapData.findIndex(function(item){
            if(name.indexOf(item.province)>-1){
                return true
            }else{
                return false
            }
        })
        if(index>-1){
            if(mapData[index].max_net_time<=20){
                return '#30b3a3'
            }else if(mapData[index].max_net_time>20 && mapData[index].max_net_time<=50){
                
                return '#86e9aa'
            }else if(mapData[index].max_net_time>50 && mapData[index].max_net_time<=70){
                return '#f1e550'
            }else if(mapData[index].max_net_time>70 && mapData[index].max_net_time<=100){
                return '#ffc380'
            }else{
                return '#fb7477'
            }
        }
        return '#dae2f1'
      }

      //鼠标hover提示内容
        var $tipMarkerContent = $('<div class="tipMarker top"></div>');

        var tipMarker = new AMap.Marker({
            content: $tipMarkerContent.get(0)+88888,
            offset: new AMap.Pixel(0, 0),
            bubble: true
        });
      //根据Hover状态设置相关样式
      function toggleHoverFeature(feature, isHover=true, position) {

        tipMarker.setMap(isHover ? map : null);

        if (!feature) {
            return;
        }

        var props = feature.properties;

        if (isHover) {

            //更新提示内容
            $tipMarkerContent.html(props.adcode + ': ' + props.name);
            //更新位置
            tipMarker.setPosition(position || props.center);
        }

        $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover);

        //更新相关多边形的样式
        var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
        for (var i = 0, len = polys.length; i < len; i++) {

            polys[i].setOptions({
                fillOpacity: isHover ? 0.5 : 0.2
            });
        }
      }
      function myfun(){
         disCountry = new AMap.DistrictLayer.Country({
            zIndex: 10,
            SOC: 'CHN',
            depth: 1,
            styles: {
            'nation-stroke': '#ccc',
            'coastline-stroke': '#ccc',
            'province-stroke': 'grey',
            fill: function (props) {
                return getColorByDGP(props.NAME_CHN)
            },
            }
        })
        
        map = new AMap.Map('container', {
            center: [106.122082, 33.719192],
            zoom: 4,
            isHotspot: false,
            defaultCursor: 'pointer',
            layers: [disCountry],
        })
        map.on('complete',function(){
            var layer = new AMap.LabelsLayer({
                // 开启标注避让，默认为开启，v1.4.15 新增属性
                collision: false,
                // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
                animation: true,
            });
            for (var i = 0; i < LabelsData.length; i++) {
                var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
                layer.add(labelsMarker);
            }
            map.add(layer);

        })
        //鼠标移上去事件
        map.on('mouseover', function (e) {

          let index = LabelsData.findIndex(function(item){
              console.log(e,e.lnglat.lat);
              console.log(item.position[0],item.position[1]);
                if(e.lnglat.lng==item.position[0] && e.lnglat.lat==item.position[1]){
                    console.log(item)
                    return true
                }else{
                    return false
                }
            })
           console.log(LabelsData[index]);
            // console.log(layer.getName());  
        })
      }

    


    //   AMapUI.load(
    //     ['ui/geo/DistrictExplorer', 'lib/$'],
    //     function (DistrictExplorer, $) {
    //       //创建一个实例
    //       var districtExplorer = (window.districtExplorer =
    //         new DistrictExplorer({
    //           eventSupport: true, //打开事件支持
    //           map: map,
    //         }))

    //       //当前聚焦的区域
    //       var currentAreaNode = null

    //       //鼠标hover提示内容
    //       var $tipMarkerContent = $('<div class="mydiv"></div>')

    //       var tipMarker = new AMap.Marker({
    //         content: $tipMarkerContent.get(0),
    //         offset: new AMap.Pixel(0, 0),
    //         bubble: true,
    //       })

    //       //根据Hover状态设置相关样式
    //       function toggleHoverFeature(feature, isHover, position) {
    //         tipMarker.setMap(isHover ? map : null)

    //         if (!feature) {
    //           return
    //         }

    //         var props = feature.properties

    //         if (isHover) {

    //             let index =  mapData.findIndex(function(item){
    //                     if(props.name.indexOf(item.province)>-1){
    //                         return true
    //                     }else{
    //                         return false
    //                     }
    //                 })
    //                 let strHtml = `
    //                     <h1>${props.name}</h1>
    //                 `
    //             if(index>-1){
    //                 let children = mapData[index].children
                   
    //                 for(let i in children){
    //                     strHtml+=`<p>${children[i].city}${children[i].service}:${children[i].net_time}ms</p>`
    //                 }
    //             }else{
    //                strHtml += `暂无数据`
    //             }
          
    //           //更新提示内容
    //           $tipMarkerContent.html(strHtml)
    //           //更新位置
    //           tipMarker.setPosition(position || props.center)
    //         }

    //         $('#area-tree')
    //           .find('h2[data-adcode="' + props.adcode + '"]')
    //           .toggleClass('hover', isHover)

    //         //更新相关多边形的样式
    //         var polys = districtExplorer.findFeaturePolygonsByAdcode(
    //           props.adcode
    //         )
    //         for (var i = 0, len = polys.length; i < len; i++) {
    //           polys[i].setOptions({
    //             fillOpacity: isHover ? 0.5 : 0.2,
    //           })
    //         }
    //       }

    //       //监听feature的hover事件
    //       districtExplorer.on(
    //         'featureMouseout featureMouseover',
    //         function (e, feature) {
    //             console.log(77772227);
    //           toggleHoverFeature(
    //             feature,
    //             e.type === 'featureMouseover',
    //             e.originalEvent ? e.originalEvent.lnglat : null
    //           )
    //         }
    //       )

    //       //监听鼠标在feature上滑动
    //       districtExplorer.on('featureMousemove', function (e, feature) {
    //         //更新提示位置
    //         tipMarker.setPosition(e.originalEvent.lnglat)
    //       })

    //       //feature被点击
    //       districtExplorer.on('featureClick', function (e, feature) {
    //         var props = feature.properties
    //         //如果存在子节点
    //         // if (props.childrenNum > 0) {
    //         //切换聚焦区域
    //         switch2AreaNode(props.adcode)
    //         // }
    //       })

    //       //外部区域被点击
    //       districtExplorer.on('outsideClick', function (e) {
    //         districtExplorer.locatePosition(
    //           e.originalEvent.lnglat,
    //           function (error, routeFeatures) {
    //             if (routeFeatures && routeFeatures.length > 1) {
    //               //切换到省级区域
    //               switch2AreaNode(routeFeatures[1].properties.adcode)
    //             } else {
    //               //切换到全国
    //               switch2AreaNode(100000)
    //             }
    //           },
    //           {
    //             levelLimit: 2,
    //           }
    //         )
    //       })         

    //       //绘制某个区域的边界
    //       function renderAreaPolygons(areaNode) {
    //         //更新地图视野
    //         map.setBounds(areaNode.getBounds(), null, null, true)

    //         //清除已有的绘制内容
    //         districtExplorer.clearFeaturePolygons()

    //         //绘制子区域
    //         districtExplorer.renderSubFeatures(areaNode, function (feature, i) {
    //           var fillColor = colors[i % colors.length]
    //           var strokeColor = colors[colors.length - 1 - (i % colors.length)]

    //           return {
    //             cursor: 'default',
    //             bubble: true,
    //             strokeColor: strokeColor, //线颜色
    //             strokeOpacity: 1, //线透明度
    //             strokeWeight: 1, //线宽
    //             fillColor: fillColor, //填充色
    //             fillOpacity: 0.35, //填充透明度
    //           }
    //         })

    //         //绘制父区域
    //         districtExplorer.renderParentFeature(areaNode, {
    //           cursor: 'default',
    //           bubble: true,
    //           strokeColor: 'black', //线颜色
    //           strokeOpacity: 1, //线透明度
    //           strokeWeight: 1, //线宽
    //           fillColor: areaNode.getSubFeatures().length ? null : colors[0], //填充色
    //           fillOpacity: 0.35, //填充透明度
    //         })
    //       }

    //       //切换区域后刷新显示内容
    //       function refreshAreaNode(areaNode) {
    //         districtExplorer.setHoverFeature(null)

    //         // renderAreaPolygons(areaNode)

    //         //更新选中节点的class
    //         var $nodeEles = $('#area-tree').find('h2')

    //         $nodeEles.removeClass('selected')

    //         var $selectedNode = $nodeEles
    //           .filter('h2[data-adcode=' + areaNode.getAdcode() + ']')
    //           .addClass('selected')

    //         //展开下层节点
    //         $selectedNode.closest('li').removeClass('hide-sub')

    //         //折叠下层的子节点
    //         $selectedNode.siblings('ul.sublist').children().addClass('hide-sub')
    //       }

    //       //切换区域
    //       function switch2AreaNode(adcode, callback) {
    //         if (
    //           currentAreaNode &&
    //           '' + currentAreaNode.getAdcode() === '' + adcode
    //         ) {
    //           return
    //         }

    //         loadAreaNode(adcode, function (error, areaNode) {
    //           if (error) {
    //             if (callback) {
    //               callback(error)
    //             }

    //             return
    //           }

    //           currentAreaNode = window.currentAreaNode = areaNode

    //           //设置当前使用的定位用节点
    //           districtExplorer.setAreaNodesForLocating([currentAreaNode])

    //           refreshAreaNode(areaNode)

    //           if (callback) {
    //             callback(null, areaNode)
    //           }
    //         })
    //       }

    //       //加载区域
    //       function loadAreaNode(adcode, callback) {
    //         districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
    //           if (error) {
    //             if (callback) {
    //               callback(error)
    //             }

    //             console.error(error)

    //             return
    //           }

    //           if (callback) {
    //             callback(null, areaNode)
    //           }
    //         })
    //       }

    //       //全国
    //       switch2AreaNode(100000)
    //     }
    //   )
    </script>

  </body>
</html>
